<template>
    <div class="box">
        <div class="sucInfo">
            <img src="@images/ico_fail.png" alt="">
            <p><b>결제가 실패하였습니다.</b></p>
        </div>
        <div class="links">
          <p>다시 결제를 시도해주세요. 감사합니다.</p>
            <!-- <p v-html="msg"></p> -->
        </div>
        <div class="btns">
            <el-button type="primary" :loading="loading" @click="back">다시시도</el-button>
            <el-button plain @click="back">상품으로이동</el-button>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Local } from '@/utils'
import { checkPayment } from '@/api'
import { payment } from '@/utils/payment'

export default {
  name:'',
  components:{},
  props:[],
  data(){
    return {
      loading:false,
      orderID:'',
      msg:'',
      path:'',
      orderData:null
    }
  },
  computed:{},
  created(){
    this.orderID=this.$route.query.id||'';
    this.msg=this.$route.query.msg||'';
    let _coach=Local.get('coachData')
    if(_coach){
      this.path=_coach.path
      this.orderData=_coach.data
    }
  },
  mounted(){},
  methods:{
    back(){
      if(this.path){
        Local.remove('coachData')
        this.$router.replace(this.path)
      }else{
        this.$router.go(-1)
      }      
    },
    rePay(){
      this.loading=true
      payment(this.orderData,this.pay)
    },
    async pay(rsp){
      if(rsp.success) {         
          let res = await checkPayment({imp_uid:rsp.imp_uid,merchant_uid:rsp.merchant_uid});
          if (res.code == 200) {
            this.loading=false;
            this.$router.replace({
              path:'/pay/success',
              query:{
                id:this.orderData.id
              }
            })
          }else{
            this.loading=false;
          }          
      } else {
          this.loading=false;
      }
    },
  },
  destroyed(){
    Local.remove('coachData')
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "css/pay.scss";
</style>